<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no">
<title>start</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" >
<link href="../css/zzsc.css" rel="stylesheet">
<link href="../css/yehuan_scrollbar_hidden.css" rel="stylesheet">
<link href="../css/global.css" rel="stylesheet">
<style>
	body{font-family:微软雅黑;}
	.left{ width:100%; height:100%; ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
	.div1{
		text-align:center; width:100%;}
	.div2{height:40px; line-height:40px; font-size:13px; background:#eee; border-radius:3px;margin-bottom:2px}
	.div3{display: none;cursor:pointer; font-size:13px;}
	.div3 ul{margin:0;padding:0;}
	.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
	.div3 li:visited{ background:#9C3}
	.product_img{ width:100%; height:auto}

	.linked_style{color:yellow;}
	.item{
		position:relative
	}
	#catalogue{
		overflow-y:scroll;
		padding-left:0px;
		padding-right:5px;
	}	
	#content{
		overflow-y:scroll;
		padding:0px;		
	}
	.product_show{
		margin-bottom:10px;
		border:1px solid #999;
		border-radius:3px;
	}
	.outest{
		padding: 5px 20px;
	}
	.foot{
		width:100%;
		height:40px;
		z-index:500;
		position:fixed;
		bottom:0px;
		background:#FC0;
		line-height:40px;
	}
	.plus{
		background:#000;
		opacity:0.5;
		position:absolute;
		z-index:400;
		top:0px;
		right:0px;
		padding:auto;
	}
	.sub{
		background:#000;
		opacity:0.5;
		position:absolute;
		z-index:400;
		bottom:0px;
		right:0px;
	}
	.count{
		background:#000;
		opacity:0.5;
		position:absolute;
		z-index:400;
		color:#fff;
		top:0px;
	}
	.cart{
		margin-left:10px;
		float:left;
	}
	.plus_item{
		width:24px;
		height:24px;
		margin:auto;
	}
	.deliverprice{
		line-height:40px;
		margin-right:10px;
	}
	#totalprice{
		line-height:40px;
		margin-left:10px;
		float:left;
	}
	.dontshow{
		display:none;
	}
	.price{
		color:#FC0;
		font:Tahoma, Geneva, sans-serif ;
		font-size:30px;
		
	}
	
	#done{
		float:right;
		margin-right:10px;
	
	}
	.abc{}
</style>


</head>
<body >
	<div class="outest">
	<div  class="row" >
		<div  id="catalogue" class="col-xs-4 col-sm-4 col-lg-4" >
       			<div class="left">
            		<div class="div1">
            			
            			 <#list  gory.keySet() as key >
		                        <div class="div2">${key.name}</div>
		                        <div class="div3">
		                             	<ul>
		                             		<#list gory.get(key) as category >
		                                  		<li> <a class="abc" href="javascript:list('/main/listproduct?categorycode=${category.code}');">${category.name}</a></li>
		                   					</#list>
		                               	</ul>	
		                        </div>  
    					</#list>

                	</div>
               </div>
        </div>        
    	
        <div  id="content" class="col-xs-8 col-sm-8 col-lg-8">
        	<#list products as product>
            <div  class="product_show">
            	<div class="item">
            		<img src="${product.img}" class="product_img" data-toggle="modal" data-target="#mymodal">
                	
                	<div class="plus" onClick="plus('${product.code}',${product.price})">
                		<div class="plus_item"><img src="/images/plus.png" ></div>
                	</div>
                	<div class="sub" onClick="sub('${product.code}',${product.price})">
                		<div class="plus_item"><img src="/images/plus.png" ></div>
                	</div>
                </div>
               	<p><strong>${product.name}</strong></p>
                <p><span class="price">${product.price}</span><small>/${product.spec}</small></p> 
            </div>
          	</#list>
        </div>
    </div>
    </div> <!-- outest -->
    
    
    <div class="foot">
		<div class="cart">
			<img src="../images/cart.png">		
		</div>
       
        <div id="totalprice" class="deliverprice">
				购物车是空的
		</div>
        
        <button type="button" id="done" class=" dontshow" >选好了</button>
	</div>

<!-- 模态框 -->
<div class="modal fade" id="mymodal" >
  <div class="modal-dialog" style="margin-top:auto;margin-left:0px;margin-right:0px;margin-bottom:0px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>	
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../bootstrap331/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		resize();
		
		$(".plus").click(function(e) {
			alert("abc");
            window.androidjs.plus();		
        });
		
		$(".div2").click(function(){ 
			$(this).next(".div3").slideToggle(500).siblings(".div3:visible").slideUp(500);
		});
		$("a").click(function(){
			$("a").removeClass("linked_style");
			$(this).addClass("linked_style");
		});
		$(window).resize(function(e) {
            resize();
        });
       
        function resize(){
			$(".plus").height($("img").height()/2-1);
			$(".plus").width($("img").width()/4);
			$(".sub").height($("img").height()/2-1);
			$(".sub").width($("img").width()/4);
			$("#catalogue").height($(window).height()-40);
			$("#content").height($(window).height()-40);
			$(".plus_item").css("margin-top",($(".plus").height()-$(".plus_item").height())/2);
		};

		$("#done").click(function(e){
			window.androidjs.tocreateorder();
		});
	});//end $(ready)
	
	function list(lk){
			$.ajax({
				url:lk,
				type:"get",
				success: function(data){
					$("#content").html(data);	
				}
								
			});
	}
	function plus(productcode,price){
			var totalprice=window.androidjs.plus(productcode,price);
			changeui(totalprice);
	}
	function sub(productcode,price){
			var totalprice=window.androidjs.sub(productcode,price);
			changeui(totalprice);
	}
	
	function changeui(totalprice){
		if(totalprice=="0.0"){
				$("#totalprice").html('购物车是空的');
			}else{
				$("#totalprice").html("已选:"+totalprice+"元,30元起送!");
			}
			if(totalprice>=30.0)
				$("#done").removeClass("dontshow");
			else
				$("#done").addClass("dontshow");
	}
</script>
</body>
</html>
